<template>
  <div>
    <div class="user-card">
      <template v-for="item in lists">
        <div class="user-item"  :key="item.id" v-if="item.isLogin">
          <UserInfo :property="item.userInfo" />

          <div class="user-item-tip">
            <EcgTag 
              :temperature="item.temperature"
              :bloodpressure="item.bloodpressure"
              :heartbeat="item.heartbeat"
              :bloodoxygen="item.bloodoxygen"
            />
            <div class="user-item-time">{{ item.updateTime | formatDate('YY-mm-dd HH:MM') }}</div>
          </div>

          <div class="user-item-ecg__box">
              <div class="ecg-v3">V3</div>
              <!-- 心电图canvas -->
              <div class="user-item-ecg">
                  <EcgChart :data-list="item.ecgData" />
              </div>

              <!--  健康指数 -->
              <div class="health-data">
                  <div class="health-data__temperature">
                      <health-data label="temperature" :value="item.temperature"></health-data>
                  </div>
                  <div class="health-data__bloodpressure bloodpressure">
                      <health-data label="systolicPressure" :value="item.bloodpressure.split('/')[0]"></health-data>
                      <span>/</span>
                      <health-data label="diastolicPressure" :value="item.bloodpressure.split('/')[1]"></health-data>
                  </div>
                  <div class="health-data__heartbeat">
                      <health-data label="heartbeat" :value="item.heartbeat"></health-data>
                  </div>
                  <div class="health-data__bloodoxygen">
                      <health-data label="bloodoxygen" :value="item.bloodoxygen">
                          <template>%</template>   
                      </health-data>
                  </div>
              </div>
          </div>
        </div>
        <!-- 未登录 -->
        <div class="user-item user-item__box" :key="item.id" v-else>
          <div class="user-item__bednum">{{ `0${item.id}` }}</div>
          <div class="user-item__empty">
            <img src="../../../assets/bed-empty.png">
          </div>
          <div class="user-item__empty-text">空床患者未登录</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import ECG_DATA from '@/utils/config'
import websocket from '@/utils/websocket'
import EcgChart from './EcgChart'
import UserInfo from './UserInfo'
import EcgTag from './EcgTag'
import HealthData from './HealthData'

export default {
    data () {
        return {
            lists: []
        }
    },
    components: { 
      UserInfo, 
      EcgTag, 
      EcgChart, 
      HealthData,
    },
    created () {
        this.initData()
        this.getUserInfo()
        websocket.create({
            onmessage: this.onMessage,
            onclose: this.onClose
        })
    },
    methods: {
        initData(){
            this.lists = [{id: '2'},{id: '3'},{id: '4'},{id: '5'},{id: '6'}]
        },
        getUserInfo () {
            this.$http.post('/zyb/web/v3/getUserInfo').then(res => {
                this.lists.unshift({
                    id: '1',
                    userInfo: { ...res.data, bedNum: '01' },
                    ecgData: ECG_DATA,
                    temperature: '',
                    bloodpressure: '',
                    heartbeat: '',
                    bloodoxygen: '',
                    updateTime: '',
                    isLogin: true 
                })
            })
        },
        
        // 获取健康指数数据
        onMessage (msg) {
            const currentData = this.lists.find(item => item.id === '1')
            if (msg.value) {
                currentData = new Date()
            }
            if (msg.type === 'temperature') {
                currentData['temperature'] = msg.value
                return
            }
            if (msg.type === 'bloodpressure') {
                currentData['bloodpressure'] = msg.value
                return
            }
            if (msg.type === 'bloodoxygen') {
                currentData['bloodoxygen'] = msg.value
                return
            }
            if (msg.type === 'heartbeat') {
                currentData['heartbeat'] = msg.value
                return
            }
        },

        // 重置数据
        onClose () {
            const currentData = this.lists.find(item => item.id === '1')
            currentData.temperature = ''
            currentData.bloodpressure = ''
            currentData.bloodoxygen = ''
            currentData.heartbeat = ''
        },

        
    }
}
</script>

<style lang="scss" scoped>
.ecg {
    padding-bottom: 30px;
}

.ecg-header {
    background: #388FFB;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 28px 56px;
    &__title {
        display: flex;
        flex-direction: row;
        align-items: center;
        &-ward {
            font-size: 36px;
            font-weight: 500;
            margin-right: 24px;
        }
        &-sickbed {
            font-size: 32px;
            font-weight: 400;
        }
        &-emptybed {
            color: #FF8900;
        }
    }
    &__time {
        font-size: 36px;
        font-weight: 500;
    }
}

.ecg-container {
    background: #FFFFFF;
    margin: 30px 30px 0px 30px;
    padding: 36px 24px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.02);
    .top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        &-label {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            &__item {
                display: flex;
                flex-direction: row;
                margin-right: 72px;
                &-text {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    font-size: 30px;
                    font-weight: 400;
                    color: #666666;
                    margin-right: 16px;
                }
                &-num {
                    font-size: 40px;
                    font-weight: 600;
                    line-height: 56px;
                    color: #333333;
                }
                .super-color {
                    &::before {
                        content:'';
                        display: block;
                        margin-right: 16px;
                        width: 14px;
                        height: 14px;
                        background: #BF1414;
                        border-radius: 50%;
                    }
                }
                .first-color {
                    @extend .super-color;
                    &::before {
                        background: #ED8484;
                    }
                }
                .second-color {
                    @extend .super-color;
                    &::before {
                        background: #FF8900;
                    }
                }
                .third-color {
                    @extend .super-color;
                    &::before {
                        background: #51C424;
                    }
                }
            }
        }
        &-tabs {
            display: flex;
            flex-direction: row;
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            line-height: 49px;
            &__btn {
                width: 176px;
                height: 49px;
                background: #388FFB;
                border-radius: 6px;
                color: #FFFFFF;
                margin-left: 16px;
            }
            &__btn-active {
                width: 176px;
                height: 49px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 6px;
                color: #000000;
                margin-left: 16px;
            }
        }
    }

    
    .user {
        display: flex;
        flex-direction: row;
    }
    .user-card__height {
        height: 393px;
    }
    .user-card {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;

        .tem-error .tem-anomaly {
            color: #BF1414;
        }
        .heart-error .heart-anomaly {
            color: #BF1414;
        }
        .blood-error .oxygen-anomaly {
            color: #BF1414;
        }
        .systolic-error .systolic-anomaly {
            color: #BF1414;
        }
        .diastolic-error .diastolic-anomaly {
            color: #BF1414;
        }

        .user-item__box {
            position: relative;
            .user-item__bednum {
                position: absolute;
                top: 16px;
                right: 16px;
                font-size: 40px;
                font-weight: 400;
                line-height: 56px;
                color: #8C8C8C;
            }
        }

        .user-item__empty {
            img {
                width: 176px;
                height: 122px;
                margin: 0 auto;
                margin-top: 110px;
                text-align: center;

            }
        }
        .user-item__empty-text {
            font-size: 24px;
            font-weight: 400;
            line-height: 36px;
            color: #D1D1D1;
            text-align: center;
        }
        .user-item {
            width: 387px;
            height: 393px;
            background: #FFFFFF;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
            border-radius: 10px;
            padding: 16px;
            margin-top: 40px;
            margin-right: 28px;
            &-top {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 8px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                .user-item-row {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 8px;
                }
                .user-item-headimg {
                    width: 76px;
                    height: 76px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .user-item-name {
                    width: 120px;
                    font-size: 28px;
                    font-weight: 400;
                    color: #000000;
                    margin-right: 120px;
                    text-align: left;
                }
                .user-item-bednumber {
                    font-size: 40px;
                    font-weight: 400;
                    color: #000000;
                }
                .user-item-tag {
                    width: 104px;
                    height: 29px;
                    border-radius: 4px;
                    font-size: 22px;
                    font-weight: 400;
                    line-height: 29px;
                }
                .tag-teji {
                    border: 1px solid #BF1414;
                    color: #BF1414;
                }
                .tag-yiji {
                    border: 1px solid #ED8484;
                    color: #ED8484;
                }
                .tag-erji {
                    border: 1px solid #FF8900;
                    color: #FF8900;
                }
                .tag-sanji {
                    border: 1px solid #51C424;
                    color: #51C424;
                }
                .user-item-age {
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    font-weight: 400;
                    color: #333333;
                    &.male::before{
                        content: '男';
                        display: block;
                        height: 33px;
                        font-weight: 400;
                        color: #333333;
                        padding-left: 30px;
                        padding-right: 20px;
                        margin-right: 25px;
                        background: url('~@/assets/icon_male.png') no-repeat left center;
                        background-size: 26px 26px;
                        border-right: 1px solid #D1D1D1;
                    }
                    &.female::before{
                        content: '女';
                        display: block;
                        height: 33px;
                        padding-left: 30px;
                        padding-right: 20px;
                        margin-right: 25px;
                        font-weight: 400;
                        color: #333333;
                        background: url('~@/assets/icon_female.png') no-repeat left center;
                        background-size: 26px 26px;
                        border-right: 1px solid #D1D1D1;
                    }
                }
            }
            &-tip {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                text-align: right;
            }

            &-tag-anomaly {
                flex: none;
                height: 27px;
                background: rgba(191, 20, 20, 0.29);
                border-radius: 4px;
                font-size: 18px;
                font-weight: 400;
                line-height: 27px;
                padding: 0 16px;
                color: #BF1414;
            }
            &-tip__margin {
                margin-top: 13px;
            }
            &-time {
                flex: 1;
                text-align: right;
                font-size: 24px;
                font-weight: 400;
                color: #3B608D;
                padding: 16px 0;
            }
            .user-item-ecg__box {
                width: 100%;
                height: 220px;
                border-radius: 10px;
                background: rgba(213, 231, 255, 0.61);
                position: relative;
                .ecg-v3 {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 20px;
                    color: #3B608D;
                    text-align: left;
                    position: absolute;
                    top: 12px;
                    left: 18px;
                }
                .ecg-info {
                    width: 351px;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 10px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    // font-size: 18px;
                    // font-weight: 400;
                    // line-height: 25px;
                    // color: #3B608D;
                    &__pressure {
                        display: flex;
                        flex-direction: row;
                    }
                }
                .user-item-ecg {
                    width: 351px;
                    height: 128px;
                    margin: 0 auto;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    .my-ecg {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            
        }
    }
    .user-item-infusion__height {
        height: 255px!important;
        margin-top: 25px!important;
    }
    .user-item-infusion {
        width: 100%;
        height: 220px;
        background: rgba(213, 231, 255, 0.61);
        border-radius: 10px;
        margin-top: 23px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        font-weight: 500;
        line-height: 42px;
        color: #3B608D;
        text-align: left;
        &-info {
            padding-left: 24px;
            .hr {
                width: 105px;
                border-bottom: 1px solid #3B608D;
                margin: 16px 0;
            }
        }
        &-bottle img {
            width: 116px;
            height: 204px;
            margin-right: 30px;
            display: block;
        }

    }
}
.health-data {
    width: 351px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: #3B608D;
}
</style>